<template>
	<view>
		<tt-bar leftIcon="icon-back" title="协商历史"></tt-bar>
		<view class="topZhanWei"></view>
		<scroll-view :style="{'height':scHeight+'px'}" :scroll-y="true" @scrolltolower="pushData">
			<view class="consultList">
				<view class="consultRow" v-for="(item,index) in list" :key="index">
					<view class="userInfo">
						<image :src="item.pic?item.pic:'../../static/userPic.png'"></image>
						<view class="nameAndTime">
							<text class="userName">{{item.operName}}</text>
							<text class="time">{{item.createTime}}</text>
						</view>
					</view>
					<view class="consultResult">{{refundStatus[item.status]}}</view>
					<!-- 1买家发起申请 -->
					<block v-if="item.status==1">
						<view class="tt">退款金额：{{item.amount}}</view>
						<view class="tt">退款原因：{{reason[item.type]}}</view>
						<view class="tt" v-if="item.reason">退款说明：{{item.reason}}</view>

					</block>
					<!-- 2买家撤销申请 -->
					<block v-if="item.status==2">

					</block>
					<!-- 3卖家同意 -->
					<block v-if="item.status==3">
						<view class="tt">退款金额：{{item.amount}}</view>
					</block>
					<!-- 4卖家发起协商 -->
					<block v-if="item.status==4">
						<view class="tt">协商金额：{{item.amount}}</view>
						<view class="tt" v-if="item.reason">协商说明：{{item.reason}}</view>
					</block>
					<!-- 5买家同意协商 -->
					<block v-if="item.status==5">
						<view class="tt">退款金额：{{item.amount}}</view>
					</block>
					<!-- 6买家拒绝协商 -->
					<block v-if="item.status==6">

					</block>
					<!-- 7卖家申请平台介入 -->
					<block v-if="item.status==7">
						<view class="tt">申请说明：{{item.reason}}</view>
						<view class="imgGroup" v-if="item.resList.length>0">
							<text class="tt">上传凭证：</text>
							<view class="imgBox">
								<block v-for="(itm,idx) in item.resList" :key="idx">
									<image v-if="itm.type==1" :src="itm.url" @tap="showImg(idx,index)"></image>
								</block>
							</view>
						</view>
					</block>
					<!-- 10平台同意退款 -->
					<block v-if="item.status==10">
						<view class="tt">退款金额：{{item.amount}}</view>
					</block>
					<!-- 11平台拒绝退款 -->
					<block v-if="item.status==11">
						<view class="tt">退款金额：{{item.amount}}</view>
					</block>
					<!-- 13卖家超时-同意退款-->
					<block v-if="item.status==13">
						<view class="tt">退款金额：{{item.amount}}</view>
					</block>
					<!-- 16买家超时-拒绝协商-->
					<block v-if="item.status==16">

					</block>
				</view>
			</view>
			<emptyBox v-if="list.length<1"></emptyBox>
		</scroll-view>

	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	export default {
		components: {
			ttBar,
			emptyBox
		},
		data() {
			return {
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(90),
				rid: '',
				page_no: 1,
				hasNext: false,
				list: [],
				reason: ['','不喜欢该课程', '课程效果未达到预期', '距离远，不想去', '多拍/错拍', '因个人原因无法继续上课', '因商家原因无法上课', '商家推荐了其他课程', '其他'],
				refundStatus: ['', '买家发起申请', '买家撤销申请', '卖家同意', '卖家请求协商', '买家同意协商', '买家拒绝协商', '卖家申请平台介入', '', '', '平台同意协商退款',
					'平台拒绝协商退款', '', '卖家超时同意退款', '', '', '买家超时拒绝协商'
				]
			};
		},
		methods: {
			getData() {
				this.$store.dispatch('apiGetAfterList', {
					refundId: this.rid,
					page_no: this.page_no,
					page_size: 10
				}).then(res => {
					this.page_no = res.data.data.nextPage;
					this.list = this.list.concat(res.data.data.items)
				})
			},
			pushData() {
				if (this.hasNext) {
					this.$store.dispatch('apiGetAfterList', {
						refundId: this.rid,
						page_no: this.page_no,
						page_size: 10
					}).then(res => {
						this.page_no = res.data.data.nextPage;
						this.list = this.list.concat(res.data.data.items)
					})
				} else {
					console.log("没有更多数据了");
				}

			},
			showImg(e,r) {
				let _index=parseInt(r);
				let _idx = parseInt(e);
				let _arr=[];
				this.list[_index].resList.forEach((x,i)=>{
					if(x.type==1){
						_arr.push(x.url)
					}
				})
				uni.previewImage({
					current: _idx,
					urls: _arr,
				});
			}
		},
		onLoad(cfm) {
			this.rid = cfm.rid;
			// this.rid=6
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.consultList {
		margin: 20upx 17upx;
		display: flex;
		flex-direction: column;

		.consultRow {
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10upx;
			margin-bottom: 19upx;
			padding: 24upx 30upx;
			display: flex;
			flex-direction: column;

			.userInfo {
				display: flex;
				align-items: center;

				image {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					margin-right: 16upx;
				}

				.nameAndTime {
					display: flex;
					flex-direction: column;

					.userName {
						font-size: 32rpx;
						color: #202932;
						margin-bottom: 10upx;
					}

					.time {
						font-size: 26rpx;
						color: #737373;
					}
				}
			}

			.consultResult {
				margin-top: 24upx;
				font-size: 28rpx;
				color: #202932;
				font-weight: bold;
			}

			.tt {
				font-size: 28rpx;
				color: #202932;
			}

			.imgGroup {
				display: flex;

				.tt {
					flex-shrink: 0;
				}

				.imgBox {
					flex-shrink: 1;
					display: flex;
					flex-wrap: wrap;

					image {
						width: 120upx;
						height: 120upx;
						margin-right: 20upx;
						margin-bottom: 20upx;
					}
				}
			}
		}
	}
</style>
